<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/" lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>注册页</title>
		<!-- 设置360浏览器渲染引擎 -->
		<meta name="renderer" content="webkit">
		<style>
			.errorMsg{
				color: #f0ede9;
				font-weight: normal;
				font-size:18px;
				background-color:red;
				display: none;
				text-align: center;
			}
		</style>
		<link rel="icon" type="image/png" th:href="@{/user/img/favicon.png}">
		<link rel="stylesheet" type="text/css" th:href="@{/user/amazeui/css/amazeui.css}" />
		<script type="text/javascript" charset="utf-8" th:src="@{/user/js/jquery.js}"></script>
		<script type="text/javascript" charset="utf-8" th:src="@{/user/amazeui/js/amazeui.js}"></script>
		<!-- 全局CSS -->
		<link rel="stylesheet" th:href="@{/user/css/base.css}">
		<!-- 当前页面 css -->
		<link rel="stylesheet" type="text/css" th:href="@{/user/css/register.css}"/>
		<!-- 当前页面功能 js -->
		<script th:src="@{/user/js/pages/register.js}"></script>
		<script>
			$(function (){
				$("#register_form :input:not(:last)").val("");
				$(".get-code").click(function (){
					$.ajax({
						url: "/user/userserver/getphonecode",
						type: "post",
						data:{
							"phone":$("#doc-ipt-3").val()
						},
						dataType: "json",
						success: function (result){
							if (result.status === 2){
								alert("验证码发送成功，请查看手机填写");
							}else if (result.status === 0){
								alert("验证码发送失败，请稍后重新发送");
							}else {
								alert(result.msg);
							}
						}
					})
				});

			$("#register").click(function (){
				$.ajax({
					url: "/user/userserver/register",
					type: "post",
					data:{
						"phone":$("#doc-ipt-3").val(),
						"password":$("#doc-ipt-pwd-1").val(),
						"repassword":$("#doc-ipt-pwd-2").val(),
						"phonecode":$("#doc-ipt-phonecode-2").val(),
					},
					dataType: "json",
					success: function (result){
						if (result.status === 2001){
							location.href = "http://localhost:9003/user/showlogin";
						}else {
							$(".errorMsg").text(result.msg);
							$(".errorMsg").show("fast");
							setTimeout(function () {
								$(".errorMsg").hide("normal");
							},3000)
						}
					}
				})
			})

			})
		</script>
	</head>
	<body>
		<!-- nav-start -->
		<header>
			<div class="base-nav">
				<ul class="am-g am-g-fixed">
					<li class="am-u-sm-6">
						<img class="nav-img" th:src="@{/user/img/logo.png}" alt=""/>
					</li>
					<li class="am-u-sm-2">
						<div>√</div>
						<span>正版好图书</span>
					</li>
					<li class="am-u-sm-2">
						<div>邮</div>
						<span>全场满69包邮</span>
					</li>
					<li class="am-u-sm-2">
						<div>折</div>
						<span>特价书一折起</span>
					</li>
				</ul>
			</div>
			
		</header>
		<!-- nav-end -->

		<!-- register-start -->
		<div class="am-g am-g-fixed reg-body">
			<div class="reg-title am-g">
				<h2 class="am-u-sm-2">新用户注册</h2>
				<span class="am-u-sm-3">已有账号?<a th:href="@{/user/showlogin}">请登录</a></span>
			</div>
			<div class="reg-content">
				<form class="am-form am-form-horizontal" id="register_form">
					<div class="am-form-group">
					    <label for="doc-ipt-3" class="am-u-sm-2 am-form-label">手机号码:</label>
					    <div class="am-u-sm-5  am-u-end">
					        <input type="text" id="doc-ipt-3" name="phone" placeholder="请输入您的常用手机号码" required>
					    </div>
					</div>

					<div class="am-form-group">
					    <label for="doc-ipt-pwd-1" class="am-u-sm-2 am-form-label">设置密码:</label>
					    <div class="am-u-sm-5  am-u-end">
					        <input type="password" name="password" id="doc-ipt-pwd-1" placeholder="请输入密码" required>
					    </div>
					</div>

					<div class="am-form-group">
					    <label for="doc-ipt-pwd-2" class="am-u-sm-2 am-form-label">确认密码:</label>
					    <div class="am-u-sm-5  am-u-end">
					        <input type="password" name="repassword" id="doc-ipt-pwd-2" placeholder="请再次输入密码" required>
					    </div>
					</div>

					<div class="am-form-group">
						<label for="doc-ipt-code-2" class="am-u-sm-2 am-form-label">验证码:</label>
						<div class="am-u-sm-3  am-u-end">
							<input type="password" id="doc-ipt-code-2" placeholder="请输入右图验证码" disabled>
							<p class="code"></p>
							<p class="change"><a href="javascript:void(0)" onclick="change()">换一换</a></p>
						</div>
					</div>

					<div class="am-form-group phone-code">
					    <label for="doc-ipt-phonecode-2" class="am-u-sm-2 am-form-label">手机验证码:</label>
					    <div class="am-u-sm-3  am-u-end">
					        <input type="text" name="phonecode" id="doc-ipt-phonecode-2" placeholder="请输入验证码">
						</div>
						<div class="am-u-sm-2  am-u-end">
							<div class="get-code">
								<a href="javascript:void(0);">获取验证码</a>
							</div>
						</div>
					</div>

					<div  class="am-form-group">
						<div class="am-u-sm-5  am-u-end">
						 	<input type="button" id="register" class="am-btn am-btn-block" value="立即注册"/>
						</div>

						<div>
							<span class="errorMsg am-u-sm-2" align="center"></span>
						</div>
						
					</div>

				</form>
			</div>
			 
		</div>
		<!-- register-end -->
		<!-- foot start -->	
		<div class="base-shop-foot">
			<p>© 2018 南京网博优壹 by 项目组-chw <br>2018年03月21日23:20:50</p>
		</div>
		<!-- foot end -->
	</body>
</html>